<template>
    <div class="container">
        <!-- 地图 -->
        <div class="rich_map" ref="richMap">
            <div class="rich_fox" :class="'rich_fox' + stepCurrent" @transitionend="stepEnd()"></div>
            <div class="rich_roll1_btn" @click="openRoll(1)"></div>
            <div class="rich_roll5_btn" @click="openRoll(5)"></div>
            <div v-for="(item, index) in prizeList" :class="'rich_prize' + (index + 1)" v-show="item.show"></div>
        </div>
        <!-- 掷骰子弹窗 -->
        <Transition name="fade">
            <div class="dice" v-show="diceShow"></div>
        </Transition>
        <!-- 奖励弹窗 -->
        <Transition name="fade">
            <div class="dialog" v-if="rewardShow">
                <div class="dialog_box reward">
                    <div class="reward_title"></div>
                    <div class="reward_congrats">恭喜获得以下奖励！</div>
                    <div class="gift_list">
                        <div class="gift" v-for="item in rewardList">
                            <div class="gift_bg">
                                <img class="gift_img" :src="item.pic" />
                            </div>
                            <div class="gift_name">{{ item.name }}</div>
                        </div>
                    </div>
                    <div class="reward_sure_btn" @click="rewardShow = false">收下奖励</div>
                </div>
            </div>
        </Transition>
    </div>
</template>
<script lang="ts">
import Svga from "svgaplayerweb";
import diceImg1 from "./images/dice1.png";
import diceImg2 from "./images/dice2.png";
import diceImg3 from "./images/dice3.png";
import diceImg4 from "./images/dice4.png";
import diceImg5 from "./images/dice5.png";
import diceImg6 from "./images/dice6.png";
import roll1 from "./svga/roll1.svga";
import roll5 from "./svga/roll5.svga";
import rewardImg1 from "./images/reward_img1.png";
import rewardImg2 from "./images/reward_img2.png";
import rewardImg3 from "./images/reward_img3.png";
import rewardImg4 from "./images/reward_img4.png";
import rewardImg5 from "./images/reward_img5.png";
import rewardImg6 from "./images/reward_img6.png";
import rewardImg7 from "./images/reward_img7.png";
import rewardImg8 from "./images/reward_img8.png";
import rewardImg9 from "./images/reward_img9.png";
let vm;
export default {
    data() {
        return {
            // 大富翁步进
            stepCurrent: 1,
            stepTarget: 1,
            stepQueue: [],
            stepMoving: false,
            // 大富翁奖励
            prizeList: [
                { step: 3, show: true },
                { step: 5, show: true },
                { step: 8, show: true },
                { step: 9, show: true },
                { step: 13, show: true },
                { step: 15, show: true },
                { step: 17, show: true },
                { step: 18, show: true },
                { step: 22, show: true },
                { step: 23, show: true },
                { step: 24, show: true },
            ],
            // 掷骰子
            dicePlayer: null,
            diceShow: false,
            diceVideoItem1: null,
            diceVideoItem5: null,
            diceImgs: ["", diceImg1, diceImg2, diceImg3, diceImg4, diceImg5, diceImg6],
            // 奖励弹窗
            rewardShow: false,
            rewardList: null,
        };
    },
    methods: {
        init() {
            // 初始化动画播放器
            vm.dicePlayer = new Svga.Player(".dice");
            vm.dicePlayer.loops = 1;
            vm.dicePlayer.clearsAfterStop = false;
            // 骰子动画结束
            vm.dicePlayer.onFinished(() => {
                setTimeout(
                    () => {
                        vm.diceShow = false;
                        // 往前走
                        if (++vm.stepCurrent > 24) {
                            vm.stepCurrent = 1;
                        }
                    },
                    vm.stepQueue.length > 0 ? 1000 : 0
                );
            });
            // 初始化动画解析器
            var parser = new Svga.Parser();
            parser.load(roll1, (videoItem) => {
                vm.diceVideoItem1 = videoItem;
            });
            parser.load(roll5, (videoItem) => {
                vm.diceVideoItem5 = videoItem;
            });
        },
        randomNum(num) {
            return Math.ceil(Math.random() * num);
        },
        // 摇骰子
        openRoll(num) {
            // 当前正在走，不可以重复摇
            if (vm.stepMoving) {
                return;
            }
            vm.stepMoving = true;

            // 模拟骰子结果
            let results = [];
            let p = vm.stepCurrent;
            for (let i = 0; i < num; i++) {
                let point = vm.randomNum(6);
                let award = null;
                p += point;
                if (p == 3 || p == 15) {
                    award = { name: "金豆*" + vm.randomNum(20), pic: rewardImg1 };
                }
                if (p == 5 || p == 17) {
                    award = { name: vm.randomNum(30) + "金币", pic: rewardImg2 };
                }
                if (p == 6 || p == 12 || p == 20) {
                    award = { name: vm.randomNum(30) + "能量值", pic: rewardImg9 };
                }
                if (p == 8) {
                    award = { name: "聊天背景7天", pic: rewardImg3 };
                }
                if (p == 9) {
                    award = { name: "公屏特效7天", pic: rewardImg4 };
                }
                if (p == 13 || p == 24) {
                    award = { name: "骰子次数+1", pic: rewardImg5 };
                }
                if (p == 18) {
                    award = { name: "蛋糕甜心*1", pic: rewardImg6 };
                }
                if (p == 22) {
                    award = { name: "天空之城*1", pic: rewardImg7 };
                }
                if (p == 23) {
                    award = { name: "盲盒卡*" + vm.randomNum(6), pic: rewardImg8 };
                }
                results.push({ point, award });
            }

            // 总共要走的点数队列
            vm.stepQueue = [];
            // 奖励数组
            vm.rewardList = [];

            // 遍历骰子结果
            for (let item of results) {
                if (item.award != null) {
                    vm.rewardList.push(item.award);
                }
                vm.stepQueue.push(item.point);
            }
            // 设置下一个目标点
            vm.stepTarget += vm.stepQueue.shift();
            if (vm.stepTarget > 24) {
                vm.stepTarget -= 24;
            }

            // 摇1次
            if (results.length == 1) {
                vm.dicePlayer.setVideoItem(vm.diceVideoItem1);
                vm.dicePlayer.setImage(vm.diceImgs[results[0].point], "result");
            }
            // 摇5次
            else {
                vm.dicePlayer.setVideoItem(vm.diceVideoItem5);
                for (let i = 0; i < results.length; i++) {
                    vm.dicePlayer.setImage(vm.diceImgs[results[i].point], "result" + (i + 1));
                }
            }
            // 播放动画
            vm.dicePlayer.startAnimation();
            vm.diceShow = true;
        },
        // 前进动画结束
        stepEnd() {
            // 到达第一格，所有奖励显示
            if (vm.stepCurrent == 1) {
                vm.prizeList.forEach((item) => {
                    item.show = true;
                });
            }
            // 未到达目标点，继续往下走
            if (vm.stepCurrent != vm.stepTarget) {
                if (++vm.stepCurrent > 24) {
                    vm.stepCurrent = 1;
                }
                return;
            }
            // 已到达目标点，隐藏当前点上面的奖励
            vm.prizeList.forEach((item) => {
                if (item.step == vm.stepCurrent) {
                    item.show = false;
                }
            });
            // 队列里还有值，取出来，继续走
            if (vm.stepQueue.length > 0) {
                vm.stepTarget += vm.stepQueue.shift();
                if (vm.stepTarget > 24) {
                    vm.stepTarget -= 24;
                }
                setTimeout(() => {
                    if (++vm.stepCurrent > 24) {
                        vm.stepCurrent = 1;
                    }
                }, 500);
            }
            // 队列中无值，全部走完
            else {
                vm.stepMoving = false;
                // 有奖励，展示奖励弹窗
                if (vm.rewardList.length > 0) {
                    vm.rewardShow = true;
                }
            }
        },
    },
    mounted() {
        vm = this;
        vm.init();
    },
};
</script>
<style lang="scss" scoped src="./monopoly.scss"></style>
